<template>
    <div class="container">
        <div class="top">
            <ul class="tip">
                <li>
                    <RouterLink to="/home" class="route-link"> <span class="iconfont icon-zhuye"></span>Home </RouterLink>
                </li>
                <li>
                    <RouterLink to="/about" class="route-link"> <span class="iconfont icon-wenhao1 "></span> About
                    </RouterLink>
                </li>
                <li>
                    <RouterLink to="/book" class="route-link"> <span class="iconfont icon-shuji"></span> Books </RouterLink>
                </li>
                <li class="right-border">
                    <RouterLink to="/database" class="route-link"> <span class="iconfont icon-odbc-full"></span> BooksDb
                    </RouterLink>
                </li>
            </ul>
        </div>

        <!-- 内容区域-->
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<style lang="less" scoped>
.container {
    height: 100%;

    .top {
        height: 50px;
        background-color: #000000;
        display: flex;
        justify-content: center;

        .tip {
            list-style: none;
            height: 100%;
            width: 40%;
            color: white;
            display: flex;
            justify-content: space-between;

            li {
                float: left;
                flex: 1;
                text-align: center;
                border-left: 1px solid white;
                line-height: 50px;

                .route-link {
                    color: white;
                    text-decoration: none;

                    .iconfont {
                        color: white;
                        font-size: 18px;
                    }
                }

                &:hover {
                    background-color: #666;
                }
            }

            .right-border {
                border-right: 1px solid white;
            }
        }
    }
}</style>
